<template>
  <div>
    <!-- 新建 -->
    <el-dialog
      title="选择药品"
      :visible.sync="addGoodsShow"
      :close-on-click-modal="false"
      :append-to-body="true"
      width="1200px"
      top="40px"
      class="add"
      @close="closeAdd"
    >
      <el-form class="search ml20" :inline="true" label-suffix="：" size="mini" :model="search">
        <el-form-item label="药品信息">
          <el-input v-model="search.drugs" clearable class="w280" maxlength="30" placeholder="药品名称/通用名/药品编码/三方编码/助记码" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList('search')">搜 索</el-button>
          <el-button @click="searchReset">重 置</el-button>
        </el-form-item>

      </el-form>
      <!-- <el-row class="flex_sb">
        <el-col :span="4" class="treeBox">
          <el-tree
            ref="tree"
            node-key="id"
            class="filter-tree"
            :data="options.drugCategoryCode"
            :props="defaultProps"
            highlight-current
            default-expand-all
            :filter-node-method="filterNode"
            @node-click="handleNodeClick"
          />
        </el-col>
        <el-col :span="19"> -->

      <el-table
        ref="goodsTable"
        :data="list"
        size="small"
        height="62vh"
        :cell-style="$style.cellStyle"
        :header-cell-style="$style.rowClass"
        @row-click="handleRowClick"
        @selection-change="handleSelectionChange"
      >
        <ElTableColumn type="selection" width="50" :selectable="selectable" />
        <ElTableColumn label="药品名称" prop="drugName" />
        <ElTableColumn label="单位" prop="drugUnitName" />
        <ElTableColumn label="药品编码" prop="drugCode" />
        <ElTableColumn label="三方编码" prop="thirdCode" />

      </el-table>
      <pagination
        class="page tc mt10"
        :total="page.total"
        :page.sync="page.pageNum"
        :limit.sync="page.pageSize"
        @pagination="getList"
      />
      <!-- </el-col>
      </el-row> -->
      <div slot="footer" class="mt10">
        <el-button size="mini" type="primary" @click="selectGoods">确 定</el-button>
        <el-button size="mini" @click="closeAdd">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import pagination from '@/components/Pagination';
// import { getActivityGoods } from '@/api/order';
import { drugcategoryList, getDrugList } from '@/api/drugs';
class Search {
  drugs = '';
}
class Page {
  total = 0;
  pageNum = 1;
  pageSize = 30;
}
class Options {
  drugCategoryCode = [];
}
export default {
  name: 'AddGoods',
  components: {
    pagination
  },
  props: {
    goodsId: {
      type: Array,
      default() {
        return [];
      }
    },
    drugTypeCodes: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      search: new Search(), // 检索条件
      page: new Page(), // 分页
      options: new Options(), // 选项
      list: [],
      addGoodsShow: true,
      idList: [],
      optionProps: {
        value: 'drugCategoryCode',
        label: 'drugCategoryName',
        children: 'children',
        multiple: true,
        checkStrictly: true,
        emitPath: false
      },
      filterText: '',
      defaultProps: {
        children: 'children',
        label: 'drugCategoryName'
      },
      drugCategoryCodes: []
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  mounted() {
    this.getOptions();
    // this.getList();
    console.log(this.goodsId);
  },
  activated() { },
  methods: {
    // 搜索重置
    searchReset() {
      this.search = new Search();
      this.getList();
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.drugCategoryName.indexOf(value) !== -1;
    },
    handleNodeClick(data) {
      // console.log(data);
      this.drugCategoryCodes = data.id == 0 ? [] : [data.drugCategoryCode];

      this.getList();
    },
    async getOptions() {
      const res = await drugcategoryList({});
      this.options.drugCategoryCode = res ? res.data.list : [];
      let obg = {
        drugCategoryName: '全部',
        id: 0,
        drugCategoryCode: ''
      };
      this.options.drugCategoryCode.unshift(obg);
      this.$nextTick(() => {
        this.$refs.tree.setCurrentNode(this.options.drugCategoryCode[0]);
      });
      this.handleNodeClick(obg);
    },
    async getList() {
      try {
        const { data } = await getDrugList({
          pageNum: this.page.pageNum,
          pageSize: this.page.pageSize,
          drugCategoryCodes: this.drugCategoryCodes,
          ...this.search,
          drugTypeCodes: ['10014', '10022']
        });
        // console.log(data);
        this.list = data.list;
        this.page.total = data.total;
      } catch (e) {
        this.page.total = 0;
        this.list = [];
      }
    },
    closeAdd() {
      this.$emit('closeAdd', false);
    },
    // 改变表格选中状态
    handleSelectionChange(val) {
      // console.log(val);
      this.idList = val.map(i => {
        return i;
      });
    },
    handleRowClick(row, column, event) {
      // console.log(row, column, event);
      if (this.goodsId.indexOf(row.drugCode) < 0) {
        this.$refs.goodsTable.toggleRowSelection(row);
      }
    },
    selectGoods() {
      this.$emit('goodsList', this.idList);
      this.closeAdd();
    },
    // 复选框禁用
    selectable(row) {
      // lidh 20230218 选中过得不可选中
      let flag = !(this.goodsId.indexOf(row.drugCode) >= 0);
      return flag;
    }
  }
};
</script>

<style lang="scss" scoped>
.add {
  // padding: 50px 0;
  ::v-deep.el-dialog {
    position: relative;
    // height: calc(100vh - 20px);
    // height: 82vh;

    overflow-y: auto;
  }
  ::v-deep.el-dialog__body {
    padding: 10px 20px;
  }
}
.treeBox {
  height: 70vh;
  overflow-y: auto;
  padding-bottom: 20px;
}
.filter-tree {
  // background: pink;
  .el-tree-node {
    // height: 38px;
  }
  ::v-deep.el-tree-node__content {
    height: 38px;
    // background: #f0f7ff;
    margin-bottom: 1px;
  }
  ::v-deep.is-current .el-tree-node__content {
    background: #faeded !important;
    color: #8b2e2f;
    border-radius: 3px;
    text-align: center;
  }
}
.footer {
  position: absolute;
  right: 30px;
  bottom: 50px;
}
</style>
